<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="../bower_components/react/react.production.min.js"></script>
    <script src="../bower_components/react/react-dom.production.min.js"></script>
    <script src="./js/prop-types.js"></script>
    <!--将JSX语法 转换成javascript语法 -->
    <script src="../bower_components/babel/browser.min.js"></script>

    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<body>
<div id="example"></div>
<div id-="example1"></div>
<script type="text/babel">

    // 生命周期 三个状态
    // Mounting 组件挂载  ，已经插入DOM
    // Updating 组件更新， 正在渲染 或 重新渲染
    // Unmounting 组件移除， 移出DOM

    // 四个阶段
    // 创建，实例化，更新，销毁

    /*
    1.Mounting 相关
        componentWillMount 会在组件render之前执行，并且永远都只执行一次。
        render
        componentDidMount 组件加载完毕之后立即执行,重复渲染只执行一次
    2. Updating 相关
        2.1 componentWillReceiveProps(object nextProps)
           组件接收到一个新的prop时被执行。这个方法在初始化render时不会被调用
        2.2 shouldComponentUpdate(object nextProps, object nextState)
            返回一个布尔值。在组件接收到新的props或者state时被执行 true,重新渲染，false不会重新渲染
            todo true 会执行 2.3 , 2.4,2.5 后面三个方法
            初始化时不会被执行
        2.3 componentWillUpdate(object nextProps, object nextState)
            在组件接收到新的props或者state但还没有render时被执行， 一般在渲染之前， 初始化时不会被执行
        2.4  render
        2.5 componentDidUpdate
            组件完成更新后立即执行，  初始化时不会被执行

     3. Unmounting
        3.1 componentWillUnmount
             组件从DOM unmount后立即执行
     */




    class InputText extends React.Component {

        // todo 一、初始化阶段 加载props,state
        constructor(props) {
            super(props)

            let _this= this
            setInterval(()=>{  // todo this 会变成 setInterval
                _this.tick()
            },1000)
        }

        componentWillMount() {
            this.setState({
                s:this.getDate()
            })
        }

        getDate() {
            // let endtime = new Date();
            //
            // let y = endtime.getFullYear(); // todo
            // let M = endtime.getMonth() + 1; // todo  0-11
            // let d = endtime.getDate(); // 月份中第几天 1-31;
            // let s =endtime.getSeconds();
            // let ss = s < 10 ? `0${s}`:s // todo 不足两位按两位显示
            return  Date()
        }

        tick() {
            this.setState({
                s:this.getDate()
            })
        }


        render() {
            return ( //
                <span>
                    <label>{this.state.s}</label>
                </span>
            )
        }
    }
    ReactDOM.render(
        <InputText/>,
        document.getElementById("example")
    )

</script>
</body>

</html>